<template>
    <div class="container">
        <div class="nav-logo">
            <img src="../../assets/img/nav-logo.png" alt="">
        </div>
        <Menu mode="horizontal" :theme="'light'" :active-name=index>
            <MenuItem name="1" to="/">
                首页
            </MenuItem>
            <MenuItem name="2" to="/diary">
                美丽日记
            </MenuItem>
            <Submenu name="3">
                <template slot="title" >
                    美淘
                </template>
                <MenuItem name="3-4" to="/commodity">商城</MenuItem>
            </Submenu>
            <Submenu name="4">
                <template slot="title">
                    社区
                </template>
                <MenuItem name="4-1" to="/circle">圈子</MenuItem>
            </Submenu>
            <Submenu name="5">
                <template slot="title">
                    医院\医生
                </template>
                <MenuItem name="5-1" to="/comhospital">医院</MenuItem>
                <MenuItem name="5-2" to="/cosmetology">美容机构</MenuItem>
                <MenuItem name="5-3" to="/beautician">医生</MenuItem>
                <MenuItem name="5-4" to="/translate">翻译</MenuItem>
                <MenuItem name="5-5" to="/lawyer">律师</MenuItem>
            </Submenu>
            <Submenu name="6">
                <template slot="title">
                    整形问答
                </template>
                <MenuItem name="6-1" to="/question">整形问答</MenuItem>
            </Submenu>
            <MenuItem name="7" to="/projects">
                项目百科
            </MenuItem>
        </Menu>
        <div class="right-option">
            你好，<span @click="goLogin">登陆</span> | <span @click="register">免费注册</span>
            <span class="download-app">
              <Icon type="ios-phone-portrait" :size="22" style="margin-top: -2px"/>
              下载APP
            </span>
        </div>
    </div>
</template>

<script>
export default {
  name: 'HeaderMenu',
    props:['index'],
   methods: {
       goLogin () {
           this.$router.push({path: '/login'})
       },
       register () {
           this.$router.push({path: '/phoneregister'})
       },
   }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
  @import "../../style/style.less";
  .container {
      height: 50px;
  }
  .nav-logo {
      float: left;
      padding: 0 10px;
      img {
          display: inline-block;
          vertical-align: middle;
          line-height: 1;
      }
  }
  .ivu-menu-horizontal {
      height: 50px;
      line-height: 50px;
      display: inline-block;
  }
  .right-option {
      float: right;
      span {
          cursor: pointer
      }
      .download-app {
          color: @theme-color-dark;
          margin-left: 10px;
      }
  }
</style>
